<template>
  <div class="page">
    <div class="main">
      <div class="card">
        <h3 class="title">筛选条件</h3>
        <div class="content">
          <el-form ref="form" :model="form" :rules="rules" style="margin-top:20px">
            <el-row :gutter="12" justify="start" align="top">
              <el-col :span="10">
                <el-form-item label="客户等级：" prop="khdj">
                  <el-select v-model="form.khdj" placeholder="请选择" style="width:70%" clearable>
                    <el-option v-for="item in khdjlist" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item label="客户名称：" prop="khmc">
                  <el-input v-model="form.khmc" placeholder="请输入内容" style="width:70%"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-button size="small" style="float:right;margin-left:15px">重置</el-button>
                <el-button type="primary" size="small" style="float:right">查询</el-button>
              </el-col>
            </el-row>

          </el-form>
        </div>
        <div class="content">
          <el-table ref="multipleTable"
            :header-cell-style="{ background: '#B1C8F9', color: '#000000', border: '1px solid #ccc' }" :data="tableData"
            tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange" size="mini">
            <el-table-column type="selection" width="55" align="center">
            </el-table-column>
            <el-table-column type="index" label="序号" width="80" align="center">
            </el-table-column>
            <el-table-column label="客户名称" width="180" align="center" prop="khmc">
            </el-table-column>
            <el-table-column prop="khdj" label="客户等级" align="center">
            </el-table-column>
            <el-table-column prop="dydj" label="电压等级" align="center">
            </el-table-column>
            <el-table-column prop="sfzbdy" label="是否自备电源" align="center">
            </el-table-column>
            <el-table-column label="线路所属变电站" min-width="120px" align="center" prop="xlssbdz">
            </el-table-column>
            <el-table-column prop="xlmc" label="线路名称" align="center">
            </el-table-column>
            <el-table-column prop="hyfl" label="行业分类" align="center">
            </el-table-column>
            <el-table-column prop="tdsj" label="停电时间" align="center">
            </el-table-column>
            <el-table-column prop="fdsj" label="复电时间" align="center">
            </el-table-column>
            <el-table-column prop="ydxq" label="用电需求" align="center">
            </el-table-column>
          </el-table>
          <div style="margin-top: 10px,float: right" class="InformationList-table-pag flexBetween">
            <div class="fontSize14">共{{ total }}条数据，共1页</div>
            <el-pagination background layout="prev, pager, next" @current-change="handleCurrentChange" :total="total">
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: "",
  components: {},
  data() {
    return {
      khdjlist: [],
      form: {
        khdj: "",
        khmc: ""
      },
      rules: {
        khdj: [
          { required: true, message: "请选择客户等级", trigger: "change" }
        ],
        khmc: [
          { required: true, message: "请输入客户名称", trigger: "blur" }
        ]
      },
      tableData: [
        {
          khmc: "随州南都新能源科技有限公司",
          khdj: "特级",
          dydj: "10kV",
          sfzbdy: "否",
          xlssbdz: "35kV柳林变电站",
          xlmc: "10kV柳21开关红蓝线",
          hyfl: "采矿业",
          tdsj: "2021-08-12 08:55:00",
          fdsj: "/",
          ydxq: "请提供临时电源"
        },
        {
          khmc: "随州南都新能源科技有限公司",
          khdj: "特级",
          dydj: "10kV",
          sfzbdy: "否",
          xlssbdz: "35kV柳林变电站",
          xlmc: "10kV柳21开关红蓝线",
          hyfl: "采矿业",
          tdsj: "2021-08-12 08:55:00",
          fdsj: "/",
          ydxq: "请提供临时电源"
        },
        {
          khmc: "随州南都新能源科技有限公司",
          khdj: "特级",
          dydj: "10kV",
          sfzbdy: "否",
          xlssbdz: "35kV柳林变电站",
          xlmc: "10kV柳21开关红蓝线",
          hyfl: "采矿业",
          tdsj: "2021-08-12 08:55:00",
          fdsj: "/",
          ydxq: "请提供临时电源"
        },
        {
          khmc: "随州南都新能源科技有限公司",
          khdj: "特级",
          dydj: "10kV",
          sfzbdy: "否",
          xlssbdz: "35kV柳林变电站",
          xlmc: "10kV柳21开关红蓝线",
          hyfl: "采矿业",
          tdsj: "2021-08-12 08:55:00",
          fdsj: "/",
          ydxq: "请提供临时电源"
        },
        {
          khmc: "随州南都新能源科技有限公司",
          khdj: "特级",
          dydj: "10kV",
          sfzbdy: "否",
          xlssbdz: "35kV柳林变电站",
          xlmc: "10kV柳21开关红蓝线",
          hyfl: "采矿业",
          tdsj: "2021-08-12 08:55:00",
          fdsj: "/",
          ydxq: "请提供临时电源"
        },
        {
          khmc: "随州南都新能源科技有限公司",
          khdj: "特级",
          dydj: "10kV",
          sfzbdy: "否",
          xlssbdz: "35kV柳林变电站",
          xlmc: "10kV柳21开关红蓝线",
          hyfl: "采矿业",
          tdsj: "2021-08-12 08:55:00",
          fdsj: "/",
          ydxq: "请提供临时电源"
        }
      ]
    };
  },
  methods: {
    // 分页
    handleCurrentChange(val) {
      this.pageNum = val;
    }
  }
};
</script>

<style scoped lang="less">
.title {
  border-bottom: 1px solid #ccc;
  padding-bottom: 8px;
}

.card {
  margin-bottom: 20px;
}

.content {
  width: 90%;
  position: relative;
  left: 5%;

  p {
    font-size: 16px;
    margin-top: 12px;
  }

  table tr td {
    border: 1px solid #000;
    font-size: 12px;
    text-align: center;
    padding: 10px;
  }
}
</style>
